import React, { useEffect, useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { withRouter } from "react-router-dom/cjs/react-router-dom.min";
export default function Nowplaying(props) {
  const [list, setlist] = useState([]);
  useEffect(() => {
    axios({
      url: "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=5181921",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.1","e":"16580266551103961213894657","bc":"510100"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      console.log("dawdwad", res);
      setlist(res.data.data.films);
    });
  }, []);

  // 利用usehistory跳转
  const history = useHistory();
  const handleChangePage = (id) => {
    // console.log("点击行", id);
    // window.location.href = "#/detail/" + id;
    console.log(props);
    // props.history.push(`/detail/${id}`);
    // this.props.history.push(`/detail/${id}`);
    history.push(`/detail/${id}`);
    // 三种效果一样
    // 2-query传参
    // history.push({pathname:'detail',query:{myid:id}});
    // 3-state传参  复制地址后跳转是有问题的 因为状态是缓存后传过来的
    // history.push({ pathname: "detail", state: { myid: id } });
  };
  return (
    <div>
      {list.map((item) => (
        // 不写...props传给最底层组件的话 也可以用withrouter来做效果
        <WithFilmItem key={item.filmId} {...item} />
      ))}
    </div>
  );
}
function FilmItem(props) {
  let { name, filmId, poster } = props;
  return (
    <div
      style={{
        fontSize: "20px",
        fontWeight: "700",
        backgroundColor: "#68e1e8",
        border: "1px solid black",
        margin: "5px 5px",
      }}
    >
      <li
        onClick={() => {
          props.history.push(`/detail/${filmId}`);
        }}
      >
        <img src={poster} alt="" width={"60px"} />
      </li>
      {name}
    </div>
  );
}
//利用withrouter来传递值
const WithFilmItem = withRouter(FilmItem);
